<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit"> 
	<meta content="always" name="referrer">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>找回密码</title>
    <!--[if lt IE 9]>
			<script type="text/javascript">
				window.location.href = "tip.html"
			</script>
		<![endif]-->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/findword.css">
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <div class="header w-100bfb clearfloat">
        <div class="w-1200">
            <ul class="fl" onclick="window.location.href='login.html'">WELCOME <span>找回密码</span></ul>
            <ul class="fr">没有账号？请 <a href="register.html">注册</a></ul>
        </div>
    </div>
    <div class="container w-1150">
        <div class="title">找回密码</div>
        <div class="bar">
            <ul class="first">
                <li class="num"><i class="active">1</i></li>
                <li class="desc">输入邮箱</li>
            </ul>
            <ul class="second">
                <li class="num"><i>2</i></li>
                <li class="desc">安全验证</li>
            </ul>
            <ul class="third">
                <li class="num"><i>3</i></li>
                <li class="desc">修改密码</li>
            </ul>
        </div>
        <div class="item">
            <div class="lift1">
                <ul class="tit">请输入遇到问题的邮箱</ul>
                <ul class="inpLift clearfloat">
                    <li class="fl">邮箱：</li>
                    <li class="fr"><input type="email" id="user" placeholder="请输入您的邮箱"></li>
                </ul>
                <!--<ul class="inpLift clearfloat">
                    <li class="fl">验证码：</li>
                    <li class="fr"><input type="text"></li>
                </ul>
                <ul class="inpLift clearfloat">
                    <li class="fr"><img src="img/yzm.jpg" alt=""></li>
                    <span>换一张</span>
                </ul>
                <ul class="tip clearfloat inpLift">
                    <li class="fl"></li>
                    <li class="fr"><img src="11.jpg" alt="">账号\验证码输入错误</li>
                </ul>-->
                <ul class="next1 next" style="margin-top: 50px;">下一步</ul>
            </div>

            <div class="lift2">
                <ul class="inpLift clearfloat">
                    <li class="fl">您的邮箱 :</li>
                    <li class="fr" id="email">
                        573****24@qq.com
                    </li>
                </ul>
                <ul class="inpLift clearfloat">
                    <li class="fl">验证码 ：</li>
                    <li class="fr">
                        <input type="text" id="captch">
                        <a class="getyzm">发送验证码</a>
                    </li>
                </ul>
                <ul class="tip clearfloat inpLift">
                    <li class="fl"></li>
                    <li class="fr"><!--<img src="11.jpg" alt="">账号\验证码输入错误--></li>
                </ul>
                <ul class="next2 next">下一步</ul>
            </div>


            <div class="lift3">
                <ul class="inpLift clearfloat">
                    <li class="fl">新密码 :</li>
                    <li class="fr">
                        <input type="password" id="firstPW">
                    </li>
                </ul>
                <ul class="inpLift clearfloat">
                    <li class="fl">确认密码 ：</li>
                    <li class="fr">
                        <input type="password" id="secondPW">
                    </li>
                </ul>
                <!--<ul class="strength clearfloat">
                    <li class="fl">密码强度：</li>
                    <li class="fr"><img src="img/star.png" alt=""></li>
                </ul>-->
                <ul class="tipWord">
                    <li>1.新密码长度为8-20位</li>
                    <li>2.不含空格和中文全角符号</li>
                    <li>3.不能是九位一下纯数字</li>
                </ul>
                <ul class="tip clearfloat inpLift">
                    <li class="fl"></li>
                    <li class="fr"><!--<img src="11.jpg" alt="">账号\验证码输入错误--></li>
                </ul>
                <ul class="next3 next">下一步</ul>
            </div>
            <div class="lift4">
                <img src="img/star.png" alt="">
                <p>密码设置成功</p>
            </div>
        </div>
    </div>
    <div id="qq"></div>
</body>
</html>
<script src="lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ajaxSet.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.md5.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['form', 'layedit', 'laydate','element'], function() {
        var	layer = layui.layer;
        
    	var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/; 
        
        $("#qq").load("lib/qq.html");$("#footer").load("lib/footer.html");
       
        
	    $(".next1").on("click",function () {

	    	if($("#user").val() == "" || re.test($("#user").val()) == false){
	    		layer.msg("请输入正确邮箱",{icon:2,time:3000});
	    	}else{
	    		$(".lift1").hide();
		        $(".lift2").show();
		        $(".second i").addClass("active");
				$("#email").html($("#user").val())
	    	}
	    });

		
		
		
	    $(".next2").on("click",function () {
	    	
	    	
	    	if ($("#captch").val() == "") {
				layer.msg("请输入验证码",{icon:2,time:3000});
			}else{
				
				$(".lift2").hide();
		        $(".lift3").show();
		        $(".second i").addClass("active");
		        
			}
	        
		});


		$(".next3").on("click",function () {
			
			var fpw = $("#firstPW").val(),
				spw = $("#secondPW").val();
				
			if(fpw == spw){
				$.ajax({
				    type:"post",
				    url:"http://52lvu.cn:8080/api/user/updatePwd",
				    data:{
				    	email : $("#user").val(),
				        password : fpw ,
				        captch : $("#captch").val()
				    },success : function (result){

				
				        if (result.resultCode == 200) {
				        	layer.msg("修改成功，请您重新登录",{icon:1,time:3000})
				        	localStorage.removeItem('token');
				        	setTimeout(function(){
				        	    window.location.href="login.html"
				        	},1500)
				        }
				        
				    },error : function (e){
				        layer.msg("请求错误，请稍后重试",{icon:2,time:3000})
				    }
				});
			}else{
				layer.msg("您两次输入的密码不一致",{icon:2,time:3000})
			}
	    })
	    
	    // 请求验证码
	    
	$(".getyzm").on("click",function(){
	    getYZM();
	})    
	    
	    
	    
function getYZM(){
	
    var str = $("#email").html() ;
		
		if (re.test(str)) {
			$.ajax({
				type:"post",
				url:"http://52lvu.cn:8080/api/login/getCaptch",
				data:{
					email : $("#email").html(),
					state : 2
				},success : function (result){

					
					if(result.resultCode == 200){
						invokeSettime(".getyzm")
					}else if (result.resultCode == 108){
						layer.msg("您的邮箱已经注册，请直接登录",{icon:2,time:3000});
					}
					
					
				},error : function (){
					layer.msg("请求错误！请稍候重试",{icon:2,time:3000});
				}
			});
		} else{
			layer.msg("请输入格式正确的邮箱",{icon:2,time:3000});
		}
}



function invokeSettime(obj){
    var countdown = 60 ;
    settime(obj);
    function settime(obj) {
    	$(".getyzm").unbind();
        if (countdown == 0) {
            $(obj).text("获取验证码");
            $(obj).on("click",function(){
                getYZM()
            })
            countdown = 300;
            return;
        } else {
            $(obj).text("(" + countdown + ") s 重新发送");
            countdown--;
        }
        setTimeout(function() {
        	settime(obj) 
        },1000)
    }
}






	    
    })
</script>
<!--
	remain shengyu
	introduce jiudianxinxi
-->